
<!DOCTYPE html>
<html lang="en">
     <head>
     <title>Contacts</title>
     <meta charset="utf-8">
     <meta name = "format-detection" content = "telephone=no" />
     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="css/font-awesome.css">
     <link rel="stylesheet" href="css/contact-form.css" media="screen">        
    
     <script src="js/jquery-migrate-1.2.1.js"></script>
     <script src="js/jquery.easing.1.3.js"></script>
     <script src="js/script.js"></script>
     <script src="js/jquery.equalheights.js"></script>
     <script src="js/jquery.ui.totop.js"></script>
     <script src="js/superfish.js"></script>
     <script src="js/jquery.mobilemenu.js"></script>
     <script src="js/TMForm.js"></script>
     <script src="js/modal.js"></script>     
     <!--[if lt IE 8]>
       <div style=' clear: both; text-align:center; position: relative;'>
        <link rel="stylesheet" type="text/css" media="screen" href="css/ie.css">
         <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
           <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
         </a>
      </div>
    <![endif]-->
    <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
        <link rel="stylesheet" type="text/css" media="screen" href="css/ie.css">
    <![endif]-->
        <script>
            $(document).ready(function(){                
                $().UItoTop({ easingType: 'easeOutQuart' });
            });
            </script>                          
     </head>
<body id="top" class="page">

<!--==============================header=================================-->

    <header id="header" class="header">
        <div class="container_12">
            <div class="grid_6">
                <h1><a href="index.html"><img src="images/logo.png" alt=""></a></h1>
            </div>
            <div class="clear"></div>
            <div class="grid_12">
                <nav>
                    <ul class="sf-menu">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="index-1.html">About</a></li>
                        <li><a href="index-2.html">Services</a></li>
                        <li><a href="index-3.html">Blog</a>
                            <ul>
                                <li><a href="#">Dolore ipsu</a></li>
                                <li><a href="#">Consecte</a>
                                    <ul>
                                        <li><a href="#">Dolore ipsu</a></li>
                                        <li><a href="#">Consecte</a></li>
                                        <li><a href="#">Elit Conseq</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Elit Conseq</a></li>
                            </ul>
                        </li>
                        <li class="current"><a href="index-4.html">Contacts</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <div class="clear"></div>

<!--===========================content================================-->

    <div id="content">
        <div class="p102">
            <div class="container_12">
                <div class="grid_8">
                    <h3>stay in<br><span>touch</span></h3>
                    <div class="map">
                        <iframe class="map_c" src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d24214.807650104907!2d-73.94846048422478!3d40.65521573400813!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1395650655094" style="border:0"></iframe>
                    </div>
                    <div class="grid_4 alpha">
                        <address class="address">
                            <p>8901 Marmora Road,<br>Glasgow, D04 89GR.</p>
                            <dl>
                                <dt></dt>
                                <dd>Freephone: <span>+1 800 559 6580</span></dd>
                                <dd>Telephone: <span>+1 959 603 6035</span></dd>
                                <dd>FAX: <span>+1 504 889 9898</span></dd>
                                <dd>E-mail:&nbsp;<span><a href="#">mail@demolink.org</a></span></dd>
                            </dl>
                        </address>
                    </div>
                    <div class="grid_4 omega">                    
                        <address class="address">
                            <p>9863 - 9867 Mill Road, <br>Cambridge, MG09 99HT</p>
                            <dl>
                                <dt></dt>
                                <dd>Freephone: <span>+1 800 559 6580</span></dd>
                                <dd>Telephone: <span>+1 959 603 6035</span></dd>
                                <dd>FAX: <span>+1 504 889 9898</span></dd>
                                <dd>E-mail:&nbsp;<span><a href="#">mail@demolink.org</a></span></dd>
                            </dl>
                        </address>       
                    </div>
                </div>
                <div class="grid_4">
                    <h3>contact<br><span>form</span></h3>
                    <form id="contact-form">
                        <div class="contact-form-loader"></div>
                        <fieldset>
                            <label class="name">
                                <input type="text" name="name" placeholder="Name" value="" data-constraints="@Required @JustLetters"  />
                                <span class="empty-message">*This field is required.</span>
                                <span class="error-message">*This is not a valid name.</span>
                            </label>
                            <label class="email">
                                <input type="text" name="email" placeholder="E-mail" value="" data-constraints="@Required @Email" />
                                <span class="empty-message">*This field is required.</span>
                                <span class="error-message">*This is not a valid email.</span>
                            </label>
                            <label class="phone">
                                <input type="text" name="phone" placeholder="Phone" value="" data-constraints="@Required @JustNumbers" />
                                <span class="empty-message">*This field is required.</span>
                                <span class="error-message">*This is not a valid phone.</span>
                            </label>
                            <label class="message">
                                <textarea name="message" placeholder="Message" data-constraints='@Required @Length(min=20,max=999999)'>
                                </textarea>
                                <span class="empty-message">*This field is required.</span>
                                <span class="error-message">*The message is too short.</span>
                            </label>
                            <!-- <label class="recaptcha"><span class="empty-message">*This field is required.</span></label> -->
                            <div>    
                              <a href="#" class="link btns" data-type="reset">reset</a>       
                              <a href="#" class="link btns" data-type="submit">submit</a>        
                            </div>
                        </fieldset> 
                    <div class="modal fade response-message">
                      <div class="modal-dialog">
                        <div class="modal-content">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title">Modal title</h4>
                          </div>
                          <div class="modal-body">
                            You message has been sent! We will be in touch soon.
                          </div>      
                        </div>
                      </div>
                    </div>
               </form> 
            </div>
            </div>
        </div>       
    </div>

<!--==============================footer=================================-->

    <footer id="footer" class="footer">
        <div class="container_12">
            <div class="grid_6">
                <span>COMMUX</span>
                <div class="copy">
                <span>&copy;</span>
                <span id="copyright-year"></span>
                <span>|</span>
                <span><a href="index-5.html">Privacy Policy</a></span></div>
            </div>
            <div class="grid_6">
                <ul class="social-links">
                    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                    <li><a href="#"><i class="fa fa-rss"></i></a></li>  
                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                    <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                </ul>
            </div>
        </div>
    </footer>

</body>
</html>